<template>
	<view class="uni_box home">
		<navbar :title='title'>
		</navbar>
		<view class="content">
			<view class="shoulist">
				<view class="shouitem">
					<text class="sname">真实姓名</text>
					<view class="sinput">
						<u-input v-model="form.realname" type="text" :border="false" placeholder='请输入' />
					</view>
				</view>
				<view class="shouitem">
					<text class="sname">身份证号</text>
					<view class="sinput">
						<u-input v-model="form.sfz_code" type="text" :border="false" placeholder='请输入' />
					</view>
				</view>
				
				<!-- <view class="shouitem">
					<text class="sname">手持身份证照</text>
					<view class="tuview">
						
						<view class="tuitem" @click="getyulan(ossThree(form.qrcode))" v-if="form.qrcode">
							<image class="tuimg" :src="ossThree(form.qrcode)" mode="" />
						</view>
						<view class="tuitem" @click="upload(2)">
							<image class="icon_zp" src="@/pages_client/static/img/icon_zp.png" mode="" />
							<text>上传照片</text>
						</view>
					</view>
				</view> -->
			</view>
			<view class="baocun" @click="getbaocun">保存</view>
		</view>
	</view>
</template>

<script>
import {
		baseUrl
	} from '@/utils/config.js'; 
	export default {
		data() {
			return {
				title:'实名认证',
				name:'',
				type:1,//1支付宝 2微信 3银行卡
				zhiinfo:{
					zfb_name:'',
					zfb_account:'',
					zfb_image:'',

					bank_title:'',
					bank_branch:'',
					bank_iban:'',
				},
				id:'',
				form:{
					realname:'',
					sfz_code:'',
					sfz_image:''
				},
				head_portrait:'',
				user:{}
			}
		},
		onLoad(option) {
			this.getuser()
		},
		onShow() {
		},
		methods: {
			async getuser(){
				let res = await this.$u.api.user({
				});
				this.user = res.data
				if(res.data.realname){
					this.form.realname = res.data.realname
				}
				if(res.data.sfz_code){
					this.form.sfz_code = res.data.sfz_code
				}
			},
			getyulan(e){
                uni.previewImage({
                    current: e, // 当前显示图片的 http 链接
                    urls: [e] // 需要预览的图片 http 链接列表
                });
            },
			async gethuixian(){
				let res = await this.$u.api.getAccountInfo({
					id:this.id
				});
				if(res){
					this.form.name = res.name
					this.form.code = res.code
					this.form.qrcode = res.qrcode
					if(this.type == '银行卡'){
						this.form.bank_name = res.bank_name
						this.form.open_name = res.open_name
						this.form.iban = res.iban
					}
					
					
				}

			},
			async getbaocun(){
				let res;//addAccount editAccount
				if(!this.form.realname){
					this.$u.toast("请输入真实姓名");
					return;
				}
				if(!this.form.sfz_code){
					this.$u.toast("请输入身份证账号");
					return;
				}
				res = await this.$u.api.doAuth(this.form);
				this.$u.toast("实名认证成功");
				setTimeout(() => {
					uni.navigateBack({ delta: 1 })
				}, 1000);
				
			},
			upload(e) {
				// this.htype = e
				
				uni.chooseImage({
						count: 1,
						success: (chooseImageRes) => {
							const tempFilePaths = chooseImageRes.tempFilePaths;
							this.head_portrait = tempFilePaths[0];
							// this.isClick = true;
							this.unloadtou()
							uni.showLoading({
								title: '正在上传',
								icon: 'none',//图标
								mask: true
							});
						}
				});
				
			},
			unloadtou() {
				// console.log(this.head_portrait)
				let that = this
				uni.uploadFile({
					url: baseUrl + '/api/common/upload', //仅为示例，非真实的接口地址
					filePath: this.head_portrait,
					name: 'file',
					header: {
						'token': uni.getStorageSync('token'),
					},
					formData: {
						'token': uni.getStorageSync('token'),
					},
					success: (uploadFileRes) => {
						// console.log(uploadFileRes)
						uni.hideLoading();
						console.log(JSON.parse(uploadFileRes.data).data.url);//url
						that.form.qrcode = (JSON.parse(uploadFileRes.data).data.url)
						console.log(that.form.qrcode)
						
					},fail: e => {
						uni.hideLoading();
					},
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	page{
		background-color: #f5f5f5;
	}
	.content{
		background-color: #f5f5f5;
		padding: 30rpx;
		.shoulist{
			background-color: #fff;
			border-radius: 30rpx;
			padding: 30rpx;
			.shouitem{
				display: flex;
				flex-direction: column;
				margin-bottom: 30rpx;
				.sname{
					font-weight: bold;
					font-size: 32rpx;
					color: #111111;
					display: block;
					margin-bottom: 30rpx;
				}
				.sinput{
					background: #F5F5F5;
					border-radius: 50rpx;
					padding: 5rpx 30rpx;
				}
			}
			.shouitem:last-child{
				margin-bottom: 0;
			}
		}
	}
	.tuview{
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		.tuitem{
			margin: 0 30rpx 0 0;
			width: 160rpx;
			height: 160rpx;
			background: #F8F8F8;
			border-radius: 20rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			position: relative;
			.icon_zp{
				width: 56rpx;
				height: 56rpx;
				margin-bottom: 20rpx;
			}
			text{
				font-weight: 500;
				font-size: 26rpx;
				color: #333333;
			}
			.tuimg{
				position: absolute;
				width: 100%;
				height: 100%;
				border-radius: 20rpx;
			}
		}
		.tuchuan{
			.icon_zp{
				position: absolute;
				width: 100%;
				height: 100%;
				border-radius: 20rpx;
				margin-bottom: 0;
			}
		}
	}
	.baocun{
		height: 90rpx;
		background: linear-gradient(90deg, #FF8F39, #FF4D43);
		border-radius: 45rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-weight: bold;
		font-size: 28rpx;
		color: #FFFFFF;
		margin-top: 70rpx;
	}
</style>
